<template>
    <div class="userlist">
        <ul>
            <user_li
                      v-for="(user,index) in userList"
                      :key="user.id"
                      :user="user"
                      :index="index"
            />
        </ul>
    </div>
</template>
<script>
  import user_li from './user_li'
  export default {
    data: function () {
      return {
        userList: [
          { id:0,username: 'Lunc', age: 17, phoneNum: '13022323111', sex: 0 },
          { id:1,username: 'Mike', age: 19, phoneNum: '13022111111', sex: 0 },
          { id:2,username: 'Jun', age: 12, phoneNum: '1304522111', sex: 0 },
          { id:3,username: 'Lopa', age: 22, phoneNum: '13066663111', sex: 0 },
          { id:4,username: 'Fysm', age: 11, phoneNum: '13024444111', sex: 0 },
          { id:5,username: 'Tybx', age: 32, phoneNum: '1302323111', sex: 0 },
        ]
      }
    },
    components:{
      user_li
    },
    created: function () {
    }, // 创建时
    beforeMount: function () {
    }, // 挂载之前
    mounted: function () {
    }, // 挂载之后
    beforeUpdate: function () {
    }, // 数据更新时调用,在渲染之前
    updated: function () {
    }, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {
    }, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {
    }, // 实例销毁后调用
    methods: {} // 函数
  }
</script>
<style>
    .userlist {
        box-sizing: border-box;
    }
</style>
